<script>
export default {
  props: {
    classification: {
      type: String,
      default: () => ("") // 设置默认值为一个空对象
    },
  }
}
</script>

<template>
  <div class="artistic-letter">
    <p class="letter">{{classification}}</p>
    <h2 class="title">技能等级</h2>
  </div>
</template>

<style scoped lang="scss">
.page {
  padding: 18px;
}
.artistic-letter {
  /* 添加样式以渲染艺术字母，例如阴影、颜色、大小等 */
  text-align: center;
  font-size: 8rem; /* 设置字体大小 */
  font-family: 'Arial'; /* 设置字体 */
  color: #23578e; /* 设置颜色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.53); /* 设置阴影 */
  /* 添加其他样式以绘制艺术字母 */
}

.letter {
  /* 可以进一步定义字母特定的样式 */
  margin: 0;
  padding-top: 80px;
}
.title {
  font-size: 1.5rem; /* 设置标题字体大小 */
}
</style>
